<template>
	<div class="wrapper">

		<swiper :options="swiperOption" v-if="showSwiper">
			<!-- slides -->
			<swiper-slide  v-for="item of list" :key="item.id" ><img :src="item.imgUrl" class="swiper-img"/></swiper-slide>
			

			<!-- Optional controls -->
			<div class="swiper-pagination" slot="pagination"></div>

		</swiper>

	</div>
</template>

<script>
	export default {
		name: 'HomeSwiper',
		props:{
			list: Array
		},
		data() {
			return {
				swiperOption: {
					pagination:'.swiper-pagination',
					autoplay: 3000,
			        speed:500,
			        disableOnInteraction: false,
			        mousewheelControl: true,
					loop:true,
					
				}
				
			}
		},
		computed: {
			showSwiper () {
				return this.list.length;
			}
		}
	}
</script>

<style lang="stylus" scoped>
	
	.wrapper//解决轮播图未加载完成时，高度自适应，防止页面抖动
	  overflow: hidden
	  width: 100%
	  height: 0
	  padding-bottom:30.67%
	  background: pink;
	  .swiper-img
	    width: 100%;	
	
	.wrapper >>> .swiper-pagination-bullet-active
		background: #fff !important;
</style>

